<template>
	<div class="mt-2 flex justify-between items-center">
		<div class="flex items-center text-t-3">
			<base-icon name="betslip" size="20"></base-icon>
			<div class="ml-1">{{ $t('betting.bets') }}</div>
		</div>
		<betting-recent :data="list"></betting-recent>
	</div>
</template>

<script lang="ts" setup>
import { ref, Ref, inject, watch } from 'vue'
import { BaseIcon } from '@/components/base'
import { BettingRecent } from '@/components/betting'
import { getUserFeedsList } from '@/api/feed'
import { useAppStore } from '@/store'

const userId = inject<Ref<string>>('userId')

const appStore = useAppStore()

const list = ref([])

const getRecentData = async () => {
	try {
		const { data } = await getUserFeedsList({
			locale: appStore.lang,
			oddsStyle: appStore.odds,
			currency: appStore.currency,
			orderBy: 'settled_at',
			status: 'settled',
			userId: userId!.value
		})
		list.value = data.list
			.map((item: any) => item.outcome)
			.filter((item: any) => item)
			.slice(0, 5)
	} catch {}
}

watch(
	() => userId?.value,
	() => {
		if (userId?.value) {
			getRecentData()
		}
	},
	{
		immediate: true
	}
)
</script>
